import { DEFAULT_AVATAR } from "data";
import type { AvatarShape, AvatarSize } from "@/components/Avatar";
import Avatar from "@/components/Avatar";
import Panel from "@/components/Panel";

const shapes: AvatarShape[] = ["circle", "square"];
const sizes: AvatarSize[] = ["sm", "md", "lg"];

export default function Avatars() {
  return (
    <Panel class="bg-white">
      {{
        title: () => "Avatars",
        default: () => (
          <div class="flex flex-col gap-4">
            <div class="flex gap-4">
              {shapes.map((shape) => (
                <Avatar shape={shape} key={shape} src={DEFAULT_AVATAR} alt="avatar" />
              ))}
            </div>
            <div class="flex gap-4 ">
              {sizes.map((size) => (
                <Avatar size={size} shape="circle" key={size} src={DEFAULT_AVATAR} alt="avatar" />
              ))}
            </div>
            <div class="flex gap-4 ">
              {sizes.map((size) => (
                <Avatar size={size} shape="square" key={size} src={DEFAULT_AVATAR} alt="avatar" />
              ))}
            </div>
          </div>
        ),
      }}
    </Panel>
  );
}
